<template>
    <div style="height: 100%">
        <el-container class="member-grade-page">
            <div class="content-header">
                <el-row type="flex" class="row-bg" justify="space-between" style="padding: 10px 10px">
                    <el-col :span="6" class="header-title">设备列表</el-col>
                    <el-col :span="6">
                        <div style="text-align: right">
                            <el-button-group>
                                <el-button type="primary" plain size="mini" icon="el-icon-circle-plus-outline"
                                           @click="dialogShow=true">新增设备
                                </el-button>
                            </el-button-group>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-main>
                <el-table ref="grade_table" :data="dataList" height="100%" v-loading="loading">
                    <el-table-column prop="id" label="编号"/>
                    <el-table-column prop="client" label="设备编号" width="280"/>
                    <el-table-column prop="remark" label="备注" />
                    <el-table-column prop="user" label="所属用户" />
                    <el-table-column prop="created_at" label="添加时间" width="150">
                        <template slot-scope="props">
                            {{props.row.created_at|secondToDate}}
                        </template>
                    </el-table-column>

                    <el-table-column prop="updated_at" label="最后修改" width="150">
                        <template slot-scope="props">
                            {{props.row.updated_at|secondToDate}}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-link
                                    size="mini" plain
                                    type="primary"
                                    icon="el-icon-delete"
                                    :underline="false"
                                    style="margin-right: 5px;font-size: 11px"
                                    @click="remove(scope.row)">删除
                            </el-link>
                        </template>

                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer class="content-table-pagination">
                <el-pagination
                        background
                        :current-page="pagination.current_page"
                        layout="total,prev, pager, next"
                        @current-change="getData"
                        :total="pagination.totalCount">
                </el-pagination>
            </el-footer>

        </el-container>

        <el-dialog
                title="添加设备"
                center
                :visible.sync="dialogShow"
                width="30%">

            <el-form label-position="right" :model="device" :rules="rules" :label-width="label_width" ref="addUser">
                <el-form-item  label="设备编号" prop="id"  size="small">
                    <el-input
                            auto-complete="new-password"
                            placeholder="设备编号"
                            v-model="device.client"/>
                </el-form-item>

                <el-form-item  label="所属用户" prop="user"   size="small">
                    <el-select v-model="device.user" placeholder="请选择">
                    <el-option
                            v-for="item in auth_user"
                            :key="item.username"
                            :label="item.username"
                            :value="item.username">
                    </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="remark" label="备注信息"  size="small">
                    <el-input type="textarea"
                              :rows="5"
                              placeholder="请输入备注"
                              v-model="device.remark"/>
                </el-form-item>
            </el-form>
            <template slot="footer" class="dialog-footer">
                <el-button plain size="small" type="primary" @click="add">保 存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {get_device, delete_device, save_device, get_mqtt_user} from "../api/himq_http";
    import {formatTime} from "../comm/date_utils";

    export default {
        name: "DeviceList",
        data() {
            return {
                dataList: [],
                auth_user:[],
                loading: false,
                dialogShow: false,
                editdialogShow: false,
                label_width: "100px",
                pagination: {
                    totalCount: 10,
                    current_page: 1
                },
                device: {
                    user:'',
                    remark: '',
                    client:'',
                },
                rules: {
                    id: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, max: 26, message: '账号长度在5到26个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, message: '密码长度在5到16个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getAuthUser()
            this.getData(1)
        },
        filters:{
            secondToDate(s){
                return formatTime(s*1000,"Y-M-D h:m:s")
            },
        },
        methods: {
            getData(page) {
                console.log(page)
                this.loading = true;
                let that = this;
                get_device({page:page,page_size:20}).then(
                    resp => {
                        that.loading = false;
                        that.dataList = resp.data.items;
                    }, err => {
                        that.loading = false;
                        console.log(err.message)
                    }
                )
            },

            getAuthUser() {
                let that = this;
                get_mqtt_user({page:1,page_size:100}).then(
                    resp => {
                        that.auth_user  = resp.data.items;
                    }, err => {
                        console.log(err.message)
                    }
                )
            },

            remove(row) {
                let label = '确定要删除该用户?';
                let that = this;
                this.$confirm(label, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    delete_device({id: row.id}).then(
                        resp => {
                            that.$toast({message: resp.message,type:"success"})
                            that.getData(1)
                        }
                    )
                }).catch(reason => {
                    console.log(reason)
                })
            },

            add() {
                let that = this;
                save_device(this.device).then(
                    resp => {
                        that.dialogShow = false;
                        that.$toast({message: resp.message,type:"success"})
                        that.getData(1);
                    }, err => {
                        that.$toast({message: err.message,type:"success"})
                        that.dialogShow = false;
                        console.log(err.message)
                    }
                )
            },
        }
    }
</script>

<style scoped>

</style>